<template>
	<view class="pages">
		<view class="headers">
			<view class="touxiang" @click="$imgShow(avatarUrl)">
				<image :src=" isavatar ? avatarUrl : '../../static/touxiang.png'" mode="" style="width: 230rpx;height: 195rpx;"> </image>
			</view>
			<view class="userName">
				{{userInfo.real_name || ''}}
			</view>
			<view class="tips">
				Agent ID: {{userInfo.id || ''}}
				| Level: {{ dengji(userInfo.level_id) || ''}}
			</view>
			<image src="../../static/personerweima.png" mode="" style="width: 70rpx;height: 70rpx;position: absolute;top:120rpx;right: 32rpx;" @click="$next('/pages/home/MemberRegistration')"> </image>
		</view>
		<view class="items b" style="margin-top: 64rpx;" @click="$next('/pages/Profile/newEmail')">
			<view class="itemsLeft">
				<image src="../../static/ex.png" mode="" style="width: 60rpx;height: 60rpx;right: 32rpx;" > </image>
				<span>
					<!-- Email -->
					{{$t('Profile.email')}}
					</span>
			</view>
			<view class="itemsRight">
				<span>{{userInfo.email || ''}}</span>
				<!-- <u-icon name="arrow-right"></u-icon> -->
				<image src="../../static/right.png" mode="" style="width: 18rpx;height: 30rpx;right: 0rpx;margin-top: 3rpx;" > </image>
			</view>
		</view>
		<view class="items b" @click="$next('/pages/Profile/newPhone')">
			<view class="itemsLeft">
				<image src="../../static/phome.png" mode="" style="width: 60rpx;height: 60rpx;right: 32rpx;" > </image>
				<span>
					<!-- Phone -->
					{{$t('Profile.phone')}}
					</span>
			</view>
			<view class="itemsRight">
				<span>{{userInfo.mobile || ''}}</span>
				<!-- <u-icon name="arrow-right"></u-icon> -->
			<image src="../../static/right.png" mode="" style="width: 18rpx;height: 30rpx;right: 0rpx;margin-top: 3rpx;" > </image>
			</view>
		</view>
		<view class="items b" @click="$next('/pages/Profile/newAddress')">
			<view class="itemsLeft">
				<image src="../../static/aderr.png" mode="" style="width: 60rpx;height: 60rpx;right: 32rpx;" > </image>
				<span>
					<!-- Address -->
					{{$t('Profile.Address')}}
					</span>
			</view>
			<view class="itemsRight">
				<span>{{userInfo.address || ''}}</span>
				<!-- <u-icon name="arrow-right"></u-icon> -->
			<image src="../../static/right.png" mode="" style="width: 18rpx;height: 30rpx;right: 0rpx;margin-top: 3rpx;" > </image>
			</view>
		</view>
		<view class="items b" @click="$next('/pages/Profile/information')">
			<view class="itemsLeft">
				<image src="../../static/bailing.png" mode="" style="width: 60rpx;height: 60rpx;right: 32rpx;" > </image>
				<span>
					<!-- Sponsor Agent -->
					{{$t('personinfo')}}
					</span>
			</view>
			<view class="itemsRight">
				<span>{{userInfo.real_name || ''}}</span>
				<!-- <u-icon name="arrow-right"></u-icon> -->
				<image src="../../static/right.png" mode="" style="width: 18rpx;height: 30rpx;right: 0rpx;margin-top: 3rpx;" > </image>
			</view>
		</view>
		<view class="items" >
			<view class="itemsLeft">
				<image src="../../static/bailing.png" mode="" style="width: 60rpx;height: 60rpx;right: 32rpx;" > </image>
				<span>
					<!-- Sponsor Agent -->
					{{$t('Profile.Sponsor')}}
					</span>
			</view>
			<view class="itemsRight">
				<span>{{userInfo.pid || ''}}</span>
				<!-- <u-icon name="arrow-right"></u-icon> -->
				<!-- <image src="../../static/right.png" mode="" style="width: 18rpx;height: 30rpx;right: 0rpx;margin-top: 3rpx;" > </image> -->
			</view>
		</view>
		<view class="items" style="margin-top: 52rpx;"  @click="$next('/pages/Profile/Setting')">
			<view class="itemsLeft">
				<image src="../../static/setting.png" mode="" style="width: 60rpx;height: 60rpx;right: 32rpx;" > </image>
				<span>
					<!-- Setting -->
					{{$t('Profile.Setting')}}
					</span>
			</view>
			<view class="itemsRight">
				<image src="../../static/right.png" mode="" style="width: 18rpx;height: 30rpx;right: 0rpx;margin-top: 3rpx;" > </image>
			</view>
		</view>
		<view class="items b" style="margin-top: 52rpx;"@click="$next('/pages/home/ruanJianXuKeXieYi')">
			<view class="itemsLeft">
				<image src="../../static/oc.png" mode="" style="width: 60rpx;height: 60rpx;right: 32rpx;" > </image>
				<span>
					<!-- Terms of Use -->
					{{$t('Profile.Terms')}}
					</span>
			</view>
			<view class="itemsRight">
				<image src="../../static/right.png" mode="" style="width: 18rpx;height: 30rpx;right: 0rpx;margin-top: 3rpx;" > </image>
			</view>
		</view>
		<view class="items" @click="$next('/pages/home/yinSi')">
			<view class="itemsLeft">
				<image src="../../static/oc.png" mode="" style="width: 60rpx;height: 60rpx;right: 32rpx;" > </image>
				<span>
					<!-- Privacy policy -->
					{{$t('Profile.Privacypolicy')}}
				</span>
			</view>
			<view class="itemsRight">
				<image src="../../static/right.png" mode="" style="width: 18rpx;height: 30rpx;right: 0rpx;margin-top: 3rpx;" > </image>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				newUrl:1,//0为新接口1为老接口
				isavatar:false,
				avatarUrl:'',
				userInfo:{
				}
			}
		},
		onShow() {
			this.getUserInfo()
		},
		methods:{
			getUserInfo() {
				uni.showLoading({
					title: this.$t('Laoding'),
				})
				this.$get(`/backend/user/userinfo`,{},this.newUrl).then(res => {
					this.userInfo = {
						...res.data.data
					}
					if(this.userInfo.avatar.startsWith('https://api.myonewow.com')) {
						this.isavatar = true 
						this.avatarUrl = this.userInfo.avatar
					} else if(this.userInfo.avatar.startsWith('images/user/avatar/')) {
						this.isavatar = true
						this.avatarUrl = `${this.$baseUrl}/${this.userInfo.avatar}`
					}
					uni.setStorageSync('user', JSON.stringify(res.data.data))
				}) 
			},
			// 等级划分
			dengji(val) {
				let txt = '';
					switch (val) {
						case 1:
							txt = 'TA';
							break;
			
						case 2:
							txt = 'MA';
								break;
			
						case 3:
							txt = 'FM';
								break;
						case 4:
							txt = 'MD';
								break;
						case 5:
							txt = 'FD';
								break;
						case 6:
							txt = 'RD';
								break;
						case 7:
							txt = 'ED';
								break;
						case 8:
							txt = 'EP';
								break;
					}
					return txt
			},
		}
	}
</script>

<style>
	.pages {
		width: 100%;
		height: 100vh;
		overflow-y: auto;
		/* padding: 0 26rpx; */
		box-sizing: border-box;
		background-color: #F0F0F0;
		padding-bottom: 60rpx;
	}
	.headers {
		position: relative;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
		overflow: hidden;
		width: 100%;
		height: 586rpx;
		background-color: #273562;
		background-image: url('');
		background-repeat: no-repeat;
		background-size: 100% 100%;
	}
	.touxiang {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 190rpx;
		height: 190rpx;
		background-color: #fff;
		border-radius: 50%;
		margin-top: 60rpx;
		overflow: hidden;
	}
	.userName {
		text-align: center;
		width: 100%;
		height: 60rpx;
		font-family: Montserrat;
		font-size: 36rpx;
		font-weight: 700;
		line-height: 60rpx;
		letter-spacing: 0.20000000298023224px;
		text-align: center;
		color: #fff;

	}
	.tips {
		font-family: Montserrat;
		font-size: 28rpx;
		font-weight: 400;
		letter-spacing: 0.20000000298023224px;
		text-align: center;
		color: #fff;
	}
	.items {
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 100%;
		height: 104rpx;
		background-color: #fff;
		padding: 0 30rpx;
		padding-left: 60rpx;
		box-sizing: border-box;
	}
	.itemsLeft {
		display: flex;
		align-items: center;
		justify-content: flex-start;
	}
	.itemsRight {
		display: flex;
		align-items: center;
		justify-content: flex-end;
	}
	.itemsRight span {
		font-family: Montserrat;
		font-size: 32rpx;
		font-weight: 400;
		letter-spacing: 0.20000000298023224px;
		text-align: right;
		color: #808080;
		margin-right: 10rpx;
	}
	.items span {
		font-family: Montserrat;
		font-size: 32rpx;
		font-weight: 400;
		letter-spacing: 0.20000000298023224px;
		text-align: left;
		margin-left: 10rpx;

	}
	.b {
		border-bottom: 2rpx solid #eee;
	}
</style>